<template>
  <van-sticky>
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
  </van-sticky>
  <div v-for="(item, index) in CartiList" :key="index">
    <van-checkbox v-model="item.check" @click="outcheck"></van-checkbox>
    <van-card
      :num="item.count"
      :price="item.goods_price"
      :title="item.goods_name"
      :thumb="item.goods_small_logo"
    >
      <template #footer>
        <van-button size="mini" @click="JIA(item)">加</van-button>
        <van-button size="mini" @click="Delete(item, index)">减</van-button>
      </template>
    </van-card>
    <van-submit-bar
      :price="Allprice"
      :button-text="`提交订单(${Allcount})`"
      @submit="onSubmit"
    >
      <van-checkbox v-model="allchecked" @click="allchange">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const onClickLeft = () => router.go(-1);
import { ref } from "vue";
import { Cart } from "../../store";
import { storeToRefs } from "pinia";
const { CartiList, Allprice, Allcount } = storeToRefs(Cart());
const { JIA, JIAN, Shanchu, Fanxuan } = Cart();

import { showConfirmDialog } from "vant";
import axios from "axios";
const Delete = (item, index) => {
  if (item.count == 1) {
    showConfirmDialog({
      title: "删除",
      message: `您确定${item.goods_name}吗`,
    })
      .then(() => {
        Shanchu(item, index);
      })
      .catch(() => {
        // on cancel
      });
  } else {
    JIAN(item, index);
  }
};
const allchecked = ref(true);
const allchange = () => {
  Fanxuan(allchecked.value);
};
const outcheck = () => {
  allchecked.value = CartiList.value.every((item) => {
    item.check;
  });
};
const onSubmit = () => {
  axios.get("/api/pay", {
    params: {
      out_trade_no:new Date().getTime(),

      total_amount:(Allprice.value/100)
    },
  }).then(res=>{
    window.open(res.data)
  });
};
</script>

<style lang="scss" scoped>
</style>